<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>whk的VUE</title>
</head>
<body>
    <div id="app">
        <!-- 界面模板 -->
        <!-- mustache语法 -->
        <h1>title部分：{{title}}</h1>
        <h2>副标题：{{se_title}}</h2>
        <h3>content部分：{{content}}</h3>
        <h1>商品列表</h1>
        <h2>{{text}}</h2>
        <input type="text" :value = "text" @input = "text = $event.target.value">
        <ul>
            <li v-for = "(item,i) in items">
                商品名称：{{item.name}}
                <br>
                <button @click = "changeKu(item,item.ku - 1)">-</button>

                <!-- v-if与小程序中的wx:if原理基本一致，写法上稍有不同 -->
                <span v-if = "item.ku > 0">{{item.ku}}</span>
                <!-- v-if不成立时就会执行v-else部分 -->
                <span v-else>无货</span>
                
                <button @click = "changeKu(item,item.ku + 1)">+</button>

                <button @click = "remove(i)">删除</button>
            </li>
        </ul>
        <button v-if = "isshow == true" @click = "isshow = !isshow">隐藏图片</button>
        <button v-else @click = "isshow = !isshow">显示图片</button>
        <img :src="imgUrl" v-show="isshow" alt="">
    </div>
    <script src="/vue.min.js"></script>
    <script>
        //vm.XXX ——>实例
        var vm = new Vue({
            //配置
            el:"#app",//css选择器
            data:{
                isshow:true,
                imgUrl:"https://img1.baidu.com/it/u=2429094805,2066369866&fm=26&fmt=auto&gp=0.jpg",
                //data数据和小程序js中的data数据类似
                title:"这是通过Vue配置来显示的数据标题",
                se_title:"这个是副标题！",
                content:"这是通过Vue配置来显示的数据内容",
                text:"这个是text内容",
                items:[
                    //vue中data的数组写法和小程序中的一致
                    {name:"iPhone",ku:5},
                    {name:"xiaomi",ku:500},
                    {name:"huawei",ku:1500}
                ]
            },
            //函数方法写在methods里面，可以供调用
            methods:{
                remove(i){
                    this.items.splice(i,1)
                },
                changeKu(items,newKu){
                    if(newKu < 0){
                        newKu = 0;
                    }
                    items.ku = newKu;

                }
            }
        })

    </script>
</body>
</html>